<template>
  <Card>
    <div class="md:flex">
      <div :id="heatMapName" style="width: 800%; height: 450%"></div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card } from 'ant-design-vue';
import { watch } from 'vue';
import * as echarts from 'echarts';
import { QueryMetricsConditionReq } from '/@/api/maintenance-center/skywalking/dashboard/model/apmModel';
import { getHeatmap } from '/@/api/maintenance-center/skywalking/dashboard/apm';
import { heatMap } from '../dashboard/apm/apm.data';

const props = defineProps(['page', 'start', 'end', 'step', 'conditionName']);

let heatMapName = 'global-heatmap';
let option = {
  title: {
    text: '',
  },
  tooltip: {
    position: 'top',
  },
  grid: {
    top: '20%',
    left: '3%',
    right: '8%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    splitArea: {
      show: true,
    },
  },
  yAxis: {
    type: 'category',
    data: [],
    splitArea: {
      show: true,
    },
  },
  visualMap: {
    min: '',
    max: '',
    calculable: true,
    orient: 'vertical',
    left: 'right',
    bottom: '65%',
  },
  series: [
    {
      type: 'heatmap',
      data: [],
      label: {
        show: true,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
};

function ifDateUndefined(start: string, end: string, step: string) {
  let isStartUndefined = start == '' || start === null || start == undefined;
  let isEndUndefined = end == '' || end === null || end == undefined;
  let isStepUndefined = step == '' || step === null || step == undefined;
  if (isStartUndefined || isEndUndefined || isStepUndefined) {
    return true;
  }
  return false;
}
const generateOption = (res, page, conditionName) => {
  let times = res.abscissa;
  let ordinates = res.ordinate;
  let data = res.data.map(function (item) {
    return [Number(item[0]), Number(item[1]), Number(item[2]) || '-'];
  });
  let minVal = Math.min.apply(
    Math,
    res.data.map((item) => {
      return item[2];
    })
  );
  let maxVal = Math.max.apply(
    Math,
    res.data.map((item) => {
      return item[2];
    })
  );

  let heatMapDom = document.getElementById(heatMapName);
  let myChart = echarts.init(heatMapDom);
  option.title.text = heatMap[page][conditionName].title;
  option.xAxis.data = times;
  option.yAxis.data = ordinates;
  option.visualMap.min = minVal;
  option.visualMap.max = maxVal;
  option.series.data = data;
  return [option, myChart];
};

watch(
  () => [props.page, props.start, props.end, props.step, props.conditionName],
  (val) => {
    if (!ifDateUndefined(val[1], val[2], val[3])) {
      let page = val[0];
      let conditionName = val[4];

      let queryMetricsConditionReq: QueryMetricsConditionReq = {
        duration: {
          start: val[1],
          end: val[2],
          step: val[3],
        },
        condition: {
          name: conditionName,
          entity: {
            scope: heatMap[page][conditionName].scope,
            normal: true,
          },
        },
      };

      getHeatmap(queryMetricsConditionReq).then((res) => {
        const [option, myChart] = generateOption(res, page, conditionName);
        option && myChart.setOption(option);
      });
    }
  }
);
</script>
